<template>
  <el-dialog
    :title="this.cStopic !== 2 ? '抽题组卷' : '随机组卷'"
    :visible.sync="topicDialogVisible"
    :close-on-press-escape="false"
    append-to-body
    width="90%"
  >
    <el-main style="display: flex; justify-content: space-around" class="kxy-pump-topic">
      <div>
        <paper-cate
          ref="paperCate"
          v-if="paperCate"
          :setCurrent="setCurrent"
          :current="current"
          :url="{
                                update:'/exam-admin/ques/cate/update',
                                save:'/exam-admin/ques/cate/save',
                                delete:'/exam-admin/ques/cate/delete',
                                tree:'/exam-admin/ques/cate/tree'
                                }"
        />
      </div>
      <ul v-if="cateId" v-loading="paperLoading">
        <li>
          <h5>单选题</h5>
          <el-row :gutter="10">
            <el-form>
              <el-col :md="12" :lg="8" :sm="24">
                <el-form-item label="简单">
                  <el-input-number
                    :controls="false"
                    :min="0"
                    :precision="0"
                    id="oddSimple"
                    v-model="form.odd_simple"
                    type="number"
                    :max="getNum.simpleNumS"
                    @blur="changeInput($event,'odd_simple',getNum.simpleNumS)"
                  />
                  /{{getNum.simpleNumS}}
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="8" :sm="24">
                <el-form-item label="正常">
                  <el-input-number
                    :controls="false"
                    :min="0"
                    :precision="0"
                    id="oddNormal"
                    v-model="form.odd_normal"
                    type="number"
                    :max="getNum.normalNumS"
                    @blur="changeInput($event,'odd_normal',getNum.normalNumS)"
                  />
                  /{{getNum.normalNumS}}
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="8" :sm="24">
                <el-form-item label="困难">
                  <el-input-number
                    :controls="false"
                    :min="0"
                    :precision="0"
                    id="oddDifficult"
                    v-model="form.odd_hard"
                    type="number"
                    :max="getNum.hardNumS"
                    @blur="changeInput($event,'odd_hard',getNum.hardNumS)"
                  />
                  /{{getNum.hardNumS}}
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
        </li>
        <li>
          <h5>多选题</h5>
          <el-row :gutter="10">
            <el-form>
              <el-col :md="12" :lg="8" :sm="24">
                <el-form-item label="简单">
                  <el-input-number
                    :controls="false"
                    :min="0"
                    :precision="0"
                    id="manySimple"
                    v-model="form.many_simple"
                    type="number"
                    :max="getNum.simpleNumM"
                    @blur="changeInput($event,'many_simple',getNum.simpleNumM)"
                  />
                  /{{getNum.simpleNumM}}
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="8" :sm="24">
                <el-form-item label="正常">
                  <el-input-number
                    :controls="false"
                    :min="0"
                    :precision="0"
                    id="manyNormal"
                    v-model="form.many_normal"
                    type="number"
                    :max="getNum.normalNumM"
                    @blur="changeInput($event,'many_normal',getNum.normalNumM)"
                  />
                  /{{getNum.normalNumM}}
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="8" :sm="24">
                <el-form-item label="困难">
                  <el-input-number
                    :controls="false"
                    :min="0"
                    :precision="0"
                    id="manyDifficult"
                    v-model="form.many_hard"
                    type="number"
                    :max="getNum.hardNumM"
                    @blur="changeInput($event,'many_hard',getNum.hardNumM)"
                  />
                  /{{getNum.hardNumM}}
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
        </li>
        <li>
          <h5>判断题</h5>
          <el-row :gutter="10">
            <el-form>
              <el-col :md="12" :lg="8" :sm="24">
                <el-form-item label="简单">
                  <el-input-number
                    :controls="false"
                    :min="0"
                    :precision="0"
                    id="JudgeSimple"
                    v-model="form.judge_simple"
                    type="number"
                    :max="getNum.simpleNumJ"
                    @blur="changeInput($event,'judge_simple',getNum.simpleNumJ)"
                  />
                  /{{getNum.simpleNumJ}}
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="8" :sm="24">
                <el-form-item label="正常">
                  <el-input-number
                    :controls="false"
                    :min="0"
                    :precision="0"
                    id="JudgeNormal"
                    v-model="form.judge_normal"
                    type="number"
                    :max="getNum.normalNumJ"
                    @blur="changeInput($event,'judge_normal',getNum.normalNumJ)"
                  />
                  /{{getNum.normalNumJ}}
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="8" :sm="24">
                <el-form-item label="困难">
                  <el-input-number
                    :controls="false"
                    :min="0"
                    :precision="0"
                    id="JudgeDifficult"
                    v-model="form.judge_hard"
                    type="number"
                    :max="getNum.hardNumJ"
                    @blur="changeInput($event,'judge_hard',getNum.hardNumJ)"
                  />
                  /{{getNum.hardNumJ}}
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
        </li>
        <li>
          <h5>填空题</h5>
          <el-row :gutter="10">
            <el-form>
              <el-col :md="12" :lg="8" :sm="24">
                <el-form-item label="简单">
                  <el-input-number
                    :controls="false"
                    :min="0"
                    :precision="0"
                    v-model="form.back_simple"
                    type="number"
                    :max="getNum.simpleNumF"
                    @blur="changeInput($event,'back_simple',getNum.simpleNumF)"
                  />
                  /{{getNum.simpleNumF}}
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="8" :sm="24">
                <el-form-item label="正常">
                  <el-input-number
                    :controls="false"
                    :min="0"
                    :precision="0"
                    v-model="form.back_normal"
                    type="number"
                    :max="getNum.normalNumF"
                    @blur="changeInput($event,'back_normal',getNum.normalNumF)"
                  />
                  /{{getNum.normalNumF}}
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="8" :sm="24">
                <el-form-item label="困难">
                  <el-input-number
                    :controls="false"
                    :min="0"
                    :precision="0"
                    v-model="form.back_hard"
                    type="number"
                    :max="getNum.hardNumF"
                    @blur="changeInput($event,'back_hard',getNum.hardNumF)"
                  />
                  /{{getNum.hardNumF}}
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
        </li>
        <li>
          <h5>简答题</h5>
          <el-row :gutter="10">
            <el-form>
              <el-col :md="12" :lg="8" :sm="24">
                <el-form-item label="简单">
                  <el-input-number
                    :controls="false"
                    :min="0"
                    :precision="0"
                    v-model="form.short_simple"
                    type="number"
                    :max="getNum.simpleNumQA"
                    @blur="changeInput($event,'short_simple',getNum.simpleNumQA)"
                  />
                  /{{getNum.simpleNumQA}}
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="8" :sm="24">
                <el-form-item label="正常">
                  <el-input-number
                    :controls="false"
                    :min="0"
                    :precision="0"
                    v-model="form.short_normal"
                    type="number"
                    :max="getNum.normalNumQA"
                    @blur="changeInput($event,'short_normal',getNum.normalNumQA)"
                  />
                  /{{getNum.normalNumQA}}
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="8" :sm="24">
                <el-form-item label="困难">
                  <el-input-number
                    :controls="false"
                    :min="0"
                    :precision="0"
                    v-model="form.short_hard"
                    type="number"
                    :max="getNum.hardNumQA"
                    @blur="changeInput($event,'short_hard',getNum.hardNumQA)"
                  />
                  /{{getNum.hardNumQA}}
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
        </li>
      </ul>
      <div v-else class="kxy-pump-topic-no-data" v-loading="paperLoading">暂无数据，请选择分类后查看</div>
    </el-main>
    <el-footer style="height: auto">
      <div class="kxy-pump-topic-button-score" v-show="!isMonth">
        <h4>
          设置每题分数
          <span>（默认设置每题分数为1分）</span>
        </h4>
        <el-row :gutter="10">
          <el-form>
            <el-col :span="4">
              <el-form-item label="单选">
                <el-input-number
                  :controls="false"
                  :min="1"
                  :precision="0"
                  id="odd"
                  v-model="score.odd"
                  type="number"
                  @change="changeScore($event,'odd')"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="多选">
                <el-input-number
                  :controls="false"
                  :min="1"
                  :precision="0"
                  id="many"
                  v-model="score.many"
                  type="number"
                  @change="changeScore($event,'many')"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="判断">
                <el-input-number
                  :controls="false"
                  :min="1"
                  :precision="0"
                  id="judge"
                  v-model="score.judge"
                  type="number"
                  @change="changeScore($event,'judge')"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="填空">
                <el-input-number
                  :controls="false"
                  :min="1"
                  :precision="0"
                  id="back"
                  v-model="score.back"
                  type="number"
                  @change="changeScore($event,'back')"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="简答">
                <el-input-number
                  :controls="false"
                  :min="1"
                  :precision="0"
                  id="short"
                  v-model="score.short"
                  type="number"
                  @change="changeScore($event,'short')"
                />
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div class="learn-drawer-range-box-buttons">
        <el-button type="danger" round @click="topicDialogVisible = false">关闭</el-button>
        <el-button type="primary" round @click="topicDialogVisible = false">选择</el-button>
      </div>
    </el-footer>
  </el-dialog>
</template>

<script>
import paperCate from './../../views/modules/paper/papercate'

export default {
  name: 'topic',
  data() {
    return {
      current: {},
      paperLoading: false,
      paperCate: false,
      cStopic: 2,
      topicDialogVisible: false,
      getNum: {
        hardNumJ: 0,
        hardNumM: 0,
        hardNumS: 0,
        hardNumF: 0,
        hardNumQA: 0,
        normalNumJ: 0,
        normalNumM: 0,
        normalNumS: 0,
        normalNumF: 0,
        normalNumQA: 0,
        simpleNumJ: 0,
        simpleNumM: 0,
        simpleNumS: 0,
        simpleNumF: 0,
        simpleNumQA: 0
      },
      form: {
        odd_simple: 0,
        odd_normal: 0,
        odd_hard: 0,
        many_simple: 0,
        many_normal: 0,
        many_hard: 0,
        judge_simple: 0,
        judge_normal: 0,
        judge_hard: 0,
        back_simple: 0,
        back_normal: 0,
        back_hard: 0,
        short_hard: 0,
        short_simple: 0,
        short_normal: 0
      },
      cateId: null,
      topicNum: {},
      score: {
        odd: 1,
        many: 1,
        judge: 1,
        back: 1,
        short: 1
      },
      allTopicNum: {}
    }
  },
  props: {
    isMonth: {
      type: Boolean,
      default: false
    },
    setTopic: Function
  },
  components: { paperCate },
  methods: {
    changeInput(e, name, num) {
      this.form[name] =
        parseInt(e) > parseInt(num) ? parseInt(num) : this.form[name]
      let _name = name.split('_')
      let _Json = {
        quesType: _name[0] === 'odd' ? 1 : _name[0] === 'many' ? 2 : _name[0] === 'judge' ? 3 : _name[0] === 'back' ? 4 : 5,
        cateId: this.cateId,
        score: this.score[_name[0]]
      }
      _Json[`${_name[1]}Num`] = this.form[name] || 0
      this.topicNum[_name[0]] = Object.assign(
        this.topicNum[_name[0]] || {},
        _Json
      )
      this.allTopicNum[this.cateId] = this.topicNum
      this.setTopic(this.allTopicNum)
    },
    changeScore(e, name) {
      this.score[name] = e
      for (let key in this.allTopicNum) {
        if (this.allTopicNum[key][name]) {
          this.allTopicNum[key][name].score = this.score[name]
        }
      }
      this.setTopic(this.allTopicNum)
    },
    setCurrent(data) {
      if (data.id) {
        this.cateId = data.id
        this.paperLoading = true
        this.$http({
          url: this.$http.adornUrl(
            `/exam-admin/ques/bank/getquescountbycateid`
          ),
          method: 'post',
          data: { cateId: data.id }
        })
          .then(res => {
            this.topicNum = {}
            if (res.code === 200) {
              this.paperLoading = false
              this.getNum = res.data
              this.regain()
            } else {
              this.paperLoading = false
              this.getNum = {
                hardNumJ: 0,
                hardNumM: 0,
                hardNumS: 0,
                hardNumF: 0,
                hardNumQA: 0,
                normalNumJ: 0,
                normalNumM: 0,
                normalNumS: 0,
                normalNumF: 0,
                normalNumQA: 0,
                simpleNumJ: 0,
                simpleNumM: 0,
                simpleNumS: 0,
                simpleNumQA: 0,
                simpleNumF: 0
              }
            }
          })
          .catch(_ => {
            this.paperLoading = false
            this.form = {
              odd_simple: 0,
              odd_normal: 0,
              odd_hard: 0,
              many_simple: 0,
              many_normal: 0,
              many_hard: 0,
              judge_simple: 0,
              judge_normal: 0,
              judge_hard: 0,
              back_simple: 0,
              back_normal: 0,
              back_hard: 0,
              short_hard: 0,
              short_simple: 0,
              short_normal: 0
            }
            this.getNum = {
              hardNumJ: 0,
              hardNumM: 0,
              hardNumS: 0,
              hardNumF: 0,
              hardNumQA: 0,
              normalNumJ: 0,
              normalNumM: 0,
              normalNumS: 0,
              normalNumF: 0,
              normalNumQA: 0,
              simpleNumJ: 0,
              simpleNumM: 0,
              simpleNumS: 0,
              simpleNumF: 0,
              simpleNumQA: 0
            }
          })
      }
    },
    // 查询获取数据
    init(allTopicNum, cStopic) {
      this.cStopic = cStopic
      this.allTopicNum = allTopicNum
      this.cateId = null
      this.score = {
        odd: 1,
        many: 1,
        judge: 1,
        back: 1,
        short: 1
      }
      this.form = {
        odd_simple: 0,
        odd_normal: 0,
        odd_hard: 0,
        many_simple: 0,
        many_normal: 0,
        many_hard: 0,
        judge_simple: 0,
        judge_normal: 0,
        judge_hard: 0,
        back_simple: 0,
        back_normal: 0,
        back_hard: 0,
        short_hard: 0,
        short_simple: 0,
        short_normal: 0
      }
      this.topicDialogVisible = true
      this.paperCate = true
      this.$nextTick(_ => {
        this.$refs.paperCate.init()
        this.regain()
      })
    },
    regain() {
      if (this.allTopicNum[this.cateId]) {
        this.topicNum = this.allTopicNum[this.cateId] || {}
        this.score.odd = this.topicNum.odd.score
        this.score.many = this.topicNum.many.score
        this.score.judge = this.topicNum.judge.score
        this.score.back = this.topicNum.back.score
        this.score.short = this.topicNum.short.score
        for (let key in this.form) {
          let _name = key.split('_')
          this.form[key] =
            this.topicNum[_name[0]] && this.topicNum[_name[0]][`${_name[1]}Num`]
              ? this.topicNum[_name[0]][`${_name[1]}Num`]
              : 0
        }
      } else {
        this.form = {
          odd_simple: 0,
          odd_normal: 0,
          odd_hard: 0,
          many_simple: 0,
          many_normal: 0,
          many_hard: 0,
          judge_simple: 0,
          judge_normal: 0,
          judge_hard: 0,
          back_simple: 0,
          back_normal: 0,
          back_hard: 0,
          short_hard: 0,
          short_simple: 0,
          short_normal: 0
        }
        this.score = {
          odd: 1,
          many: 1,
          judge: 1,
          back: 1,
          short: 1
        }
      }
    },
    reset() {
      this.topicNum = {}
      this.allTopicNum = {}
      this.score = {
        odd: 1,
        many: 1,
        judge: 1,
        back: 1,
        short: 1
      }
    }
  }
}
</script>

<style scoped lang="scss">
.kxy-pump-topic {
  .kxy-paper {
    max-height: 300px;
  }

  & > ul {
    flex: 1;
    list-style: none;
    padding: 0;
    margin: 0;

    li {
      padding: 15px 0 0 50px;
      font-size: 12px;
      color: #333;

      &:first-of-type {
        padding-top: 0;
      }

      h5 {
        margin: 0;
        font-size: 14px;
        line-height: 2;
      }

      /*
                                .topicForm {
                                    padding: 0 10px;
                                    display: flex;
                                    flex-wrap: wrap;
                                    align-items: center;
                                    justify-content: space-between;
                                }*/
    }
  }

  .kxy-pump-topic-no-data {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.kxy-pump-topic-button-score {
  font-size: 13px;
  margin-bottom: 10px;
  border-bottom: 1px solid #909399;

  h4 {
    margin: 0 0 10px;
    font-size: 14px;

    span {
      font-size: 12px;
      color: #999;
      font-weight: 300;
    }
  }

  /*div {
            padding: 10px;
            display: flex;
            justify-content: space-around;
            align-items: center;

            input {
                width: 100px;
            }
        }*/
}
</style>
